<template>
  <view class="news-card" :class="{ 'top-news': item.isTop, 'ad-news': item.isAd }">
    <!-- 模式1：纯文字（匹配图二置顶新闻样式） -->
    <template v-if="mode === 1">
      <view class="news-title">{{ item.title }}</view>
      <view class="news-meta">
        <text v-if="item.isTop" class="top-tag">置顶</text>
        <text class="news-source">{{ item.source }}</text>
        <text v-if="item.comment" class="news-comment">{{ item.comment }}评</text>
      </view>
    </template>

    <!-- 模式2：左图右文（匹配图二普通新闻图片布局） -->
    <template v-else-if="mode === 2">
      <view class="news-row">
        <image class="news-img" :src="item.imgUrl" mode="aspectFill"></image>
        <view class="news-content">
          <view class="news-title">{{ item.title }}</view>
          <view class="news-meta">
            <text class="news-source">{{ item.source }}</text>
            <text v-if="item.comment" class="news-comment">{{ item.comment }}评</text>
          </view>
        </view>
      </view>
    </template>

    <!-- 模式3：广告多图（核心修改，匹配图二广告样式） -->
    <template v-else-if="mode === 3">
      <!-- 1. 广告标签移到右侧，与“我主良缘文化”横向对齐 -->
      <view class="ad-header">
        <view class="news-title ad-title">{{ item.title }}</view>
        <text class="ad-label">广告</text>
      </view>
      <!-- 2. 广告多图：保持原图片路径，调整间距匹配图二 -->
      <view class="ad-imgs">
        <image 
          v-for="(img, index) in item.imgUrls" 
          :key="index" 
          :src="img" 
          mode="aspectFill"
          class="ad-img-item"
        ></image>
      </view>
      <!-- 3. 广告来源：与图二“我主良缘文化”位置一致 -->
      <view class="news-meta ad-meta">
        <text class="news-source">{{ item.source }}</text>
      </view>
    </template>
  </view>
</template>

<script>
export default {
  name: "NewsCard",
  props: {
    item: {
      type: Object,
      required: true
    },
    mode: {
      type: Number,
      required: true
    }
  }
};
</script>

<style scoped>
/* 基础卡片样式保持不变 */
.news-card {
  padding: 12px 10px;
  border-bottom: 1px solid #eee;
  position: relative;
}
.news-title {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 8px;
  line-height: 1.4;
}
.news-meta {
  font-size: 12px;
  color: #999;
  display: flex;
  align-items: center;
}
.top-tag {
  color: #ff4d4f;
  margin-right: 8px;
  font-weight: 500;
}
.news-source {
  margin-right: 8px;
}
.news-comment {
  color: #999;
}

/* 模式2：左图右文样式保持不变 */
.news-row {
  display: flex;
  align-items: center;
}
.news-img {
  width: 100px;
  height: 60px;
  margin-right: 10px;
  border-radius: 4px;
  /* 图片加载失败时显示灰色背景，避免空白 */
  background: #f5f5f5;
}
.news-content {
  flex: 1;
}

/* 模式3：广告样式（核心修改） */
/* 广告标题+标签横向布局，标签右对齐 */
.ad-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}
/* 广告标题取消加粗，与图二一致 */
.ad-title {
  font-weight: normal;
  margin-bottom: 0;
}
/* 广告标签：右侧显示，灰色边框，匹配图二 */
.ad-label {
  font-size: 11px;
  color: #999;
  border: 1px solid #eee;
  padding: 1px 4px;
  border-radius: 3px;
  margin-left: 10px;
}
/* 广告多图：三图并列，间距调整 */
.ad-imgs {
  display: flex;
  justify-content: space-between;
  margin: 8px 0;
}
.ad-img-item {
  width: 32%; /* 三图均分宽度，留少量间距 */
  height: 60px;
  border-radius: 4px;
  /* 图片加载失败时显示灰色背景 */
  background: #f5f5f5;
}
/* 广告来源：与标签横向对齐，避免换行 */
.ad-meta {
  justify-content: flex-start;
  margin-top: 4px;
}
</style>